import React, { Component } from 'react'
import{SearchContainer}from './StyledChildView'
import { Tag } from 'antd-mobile'
import search from 'images/home/sousuo@2x.png'
import cancel from 'images/home/cancel.png'
import { SearchBar, Button, WhiteSpace, WingBlank } from 'antd-mobile';
export default class Search extends Component { 
  state = {
   
  };
  componentDidMount() {
    this.autoFocusInst.focus();
  }
  onChange= (value) => {
    this.setState({ value });
  };
  clear = () => {
    this.setState({ value: '' });
  };
  handleClick = () => {
    this.manualFocusInst.focus();
  }
    render() {
          console.log(this.props)
        return (
           <SearchContainer> 
              <SearchBar placeholder="搜索您感兴趣的内容" ref={ref => this.autoFocusInst = ref} />
              <WhiteSpace />
               <div className="hotSearch">
                  <h2>热门搜索</h2>
                  <div className="tag-container">
                      <Tag data-seed="logId">取快递</Tag>
                      <Tag selected>网课代刷</Tag>
                      <Tag selected>代拿东西</Tag>
                      <Tag onChange={onChange}>自习室占位</Tag>
                    </div>
               </div>
           </SearchContainer>
            );
            function onChange(selected) {
              console.log(`tag selected: ${selected}`);
            }
          
    }
    cancelChange(){
      
           this.props.history.go(-1)   
    }
    

}
